Skip navigation and go to content

Motion on Websites Challenges

On this page

These challenges are meant to help you gain practice identifying potential issues. The first challenge is suitable for everyone, while the following challenges do require a bit of development skill to complete.

Whether you write code or not, the solution videos are worth viewing to build an understanding of the differences in how a web page can be presented to the user.

Your challenge is to identify potential accessibility issues related to motion on the CampSpots events page.

Visit the CampSpots Events page (”Plan Your Trip” then “Events” from the menu), then take a couple of minutes to write down your reflection on the following questions for each example:

  • What would be the impact on people when things are moving/animating on the screen?
  • How should these issues be addressed?
💡Tip

You can access the CampSpots Events page by running the application locally or via the deployed site. To run the application locally you will need to clone the repo from GitHub and follow the README.

CampSpots

The first issue is the video running in the background. If you inspect the video in DevTools you will also notice that it contains the autoplay and loop controls.

<header class="page-header">
  <div class="header-video">
    <video muted loop autoplay>...</video>
  </div>
💡Tip

Under WCAG guidelines, any media that autoplays should have controls that allow the user to pause or stop playback. A best practice is to not make content autoplay at all.

This issue should be addressed by removing autoplay and updating the controls to be visible.

This issue should be addressed by removing autoplay and updating the controls to be visible.

Solving Motion Issues

If the site you have to implement is media or movement heavy, it’s important to include the relevant WCAG criteria as requirements.

Table of browser support for the prefers-reduced-motion media query

That the prefers-reduced-motion media feature now has strong browser support, so there is no excuse not to use it!

Identify any potentially triggering motion effects on your site. You can then use CSS and JavaScript to provide a version of your site that respects your user’s preferences.

Video: Identify Accessibility Issues Related to Motion Video
Loaded: 2%
Current Time 0:00
/
Duration Time 4:00
Video Transcript

I'm going to go back to our camp spots application. And so in the plan, your trip section, we have an events page. That's got some whimsy to it.

So if we had some summer events, maybe like seasonally, the team might swap out the imagery, like maybe in the winter and then Northern hemisphere, it would be more snowy or something that we're excited for summer around these parts. So there's a sun that's animating automatically, and this auto-playing video.

That if you were trying to consume content could be a little bit distracting. So I'm just looking at how this is implemented so I can go control, click inspect, and we've got a page header video that has a video tab. And it's doesn't have any sound, but it's got the autoplay and loop options set on this video.

And so it's just gonna keep on looping and there's no controls. I could do control, click show, all controls and hit pause, but that's like a super nerdy. Developer trick. Like whenever I do stuff like that, my family and friends are just like, how'd you do that? So I wouldn't expect most users to know that, oh, that's a video tag and I can control, click and get it to stop.

That's like a dev tools hack. So we wanna make stuff not autoplay add controls to be visible. We'll go and add some code to respond to the user preference so that they don't even have to do that. They could just set reduce motion and it would not play this video. And then further down the screen, we've got a spinning sun that is an SVG element.

I'm going to show you some more examples that I have down here in our notes. So the first one is microsoft.com. And at first glance, it doesn't really have too much. Oh, Nope. It moved. It didn't have too much motion, but then it had this auto-playing carousel.

And so it's not happening super fast. But it's still moving. So if I turn, reduce motion off, see if that changes anything. So there's two slides. It definitely moved anyway. I don't think that changed anything. They do have a little button right here. Like we talked about making stuff show just by default and not hiding it behind hover.

I think this could be more obvious. There's a little, just two little minds and they're so close to the surface laptop that you can't really see. But when I hover over it, I get a big bright button that says pause slides. So I'm glad it's there. It helps I can pause. And I think they have some code if I hover over this, it pauses.

But ideally if I had reduced motion set, it should just be paused by. So that could be a nice tweak to make that a little bit better. We also have this dog studio website, definitely content warning on this one. So dog studio is a multiple multi-disciplinary creative studio at the intersection of art design and technology.

And they make good shit, apparently according to their website, but it's moving. So what we want to think about here is this motion in the background, even though it's dark colors and the white stands out really nicely against it it's constantly moving, which could make people sick. It seems subtle, but like that would be enough to make people sick.

And as I scroll. It is very parallax effect and the text comes in and out. There's some faint texts that is harder to see over the. The graphic background. There's some content that comes in and out, and as I hover, it changes the color. We have texts kind of scrolling in and out. So a lot of motion.

And if I go back over here to reduce motion, that doesn't change anything. When it could, I think having just less transitions, like not having the dog or the Wolf moving in the background, like just a status. Image would help. And I think maybe if it the text just appeared, it didn't do this, like scrolling fading treatment would help.

Yeah, just like less motion would make it less distracting. So there's that one. Some tweaks would help. And then we've got one more, which I have a big old content warning on because this one makes me really nauseous, this full screen video as they pan around. It's definitely like the moving video is a problem, but that first one in particular and it'll loop.

This one as the family, like the spinning around camera and it's full screen. So we talked about, I'm gonna close this. It's so distracting. We talked about the amount of the screen that motion takes up can really make a difference. And so when it's full screen like that, and I could see what they were going for, like on that sandstorm design website, the final one.

I think it would be a pretty boring user interface otherwise. So they were trying to make it add more human interest and make it more interesting. The challenge though, is that it's auto-playing and it's full screen, and so it could make people super dizzy. If I were giving them that feedback, I would want to be like, try to put it in terms that would mean something to them. It's exhausting to have to think that way, but you want to persuade, so I think I would try and.

Talk about, multidisciplinary, like maybe I'd speak to multimodal interaction and making it really powerful to respond to user preferences and how they could just like, I don't know, try not to make people sick. So it's an art trying to provide feedback to folks that you don't think are going to want that feedback.

They might not take the feedback no matter what you do, but we can try. How do you sell designers on things like progressive enhancement? Oh, that can be challenging. Yeah. So thinking about motion in particular, I think that's one specific piece where we can speak to the user impact. That's really where I would go with it and for progressive enhancement kind of more in general.

So that's speaking to things like device capabilities if Users don't have like really good network bandwidth and things like that. I think, I don't know, there's always the approach of trying to use analytics. Some folks just really want numbers to justify what they're doing with accessibility.

We don't have that a lot of times for privacy reasons, we might have. Data on like events like keyboard events and things we can add analytics for kind of, for everyone to see as anyone using this keyboard widget or something. And when we might have analytics for a screen size, various other things that if you're collecting any analytics, maybe there's some kind of data-driven approach.

Cause often, we're dealing with trade-offs of like how much time is it going to take us to change the way that this works? We need to make compelling arguments for doing that. So for the motion piece, talking about it being progressively enhanced, we have a WCAG to lean on.

So the web content accessibility guidelines, and the reason I brought up those requirements. Sometimes the way to sell a designer on it is to talk about it being a requirement and giving suggestions on how it could be handled gracefully, how it could be handled well and how it will improve the experience.

And so I think how you sell the designers on it is going to depend on what exactly what feature it is that you're working on, or, what user impact that might have. So there's no one answer. I think trying to sell teams on things like does this work without JavaScript, that can be harder because JavaScript is required to do a lot of things these days, and it actually helps for accessibility in a lot of ways, too.

For making things interactive. We need JavaScript for something. So yeah, ultimately I think how you message that is going to depend on what it is that you're trying to sell them on. But check with WCAG to see if there's any requirements that map to the thing that you're talking about. And that might give you some leverage on what to sell them on.

🛠️ Challenge: Add Prefers Reduced Motion to a Video

Note: This challenge requires knowledge of HTML, CSS, and JavaScript in order to solve. If you aren’t a developer, it’s still worth watching the difference in the solution video!

As we’ve seen, the CampSpots Events page has a video that is set to autoplay for everyone by default.

Your challenge is to write a JavaScript function that will conditionally apply the autoplay attribute to the video player based on whether or not the user has indicated they want to reduce motion.

You can work with a local version of the application or update the code in CodePen.

Hints: Check out the matchMedia docs on MDN for examples on how JavaScript checks if a media query is matched, as well as the CSSWG docs for prefers-reduced-motion.

🛠️ Solution: Add Prefers Reduced Motion to a Video

Event page for CampSpot Application

The CSS media query refers-reduced-motion is used to detect if the user has set an operating system preference to minimize the amount of animation or motion it uses.

Using the JavaScript matchMedia function along with prefers-reduced-motion, we can can determine if the user has set the preference and respond accordingly in the right context.

Remember that a value no-preference indicates that the user has made no preference in the underlying operating system. This keyword value evaluates as false in the boolean context.

The opposite value is reduce, which indicates that the user has set the preference at the operating system level.

Passing the prefers-reduced-motion: no-preference into a call to matchMedia will return matches if the motion preference has not been set by the user. If there is no motion preference set, then the autoplay attribute can be added to the user. Otherwise, it should be removed.

Here’s the JavaScript code for a solution:

const video = document.querySelector('video')

var motionQuery = matchMedia('(prefers-reduced-motion: no-preference)');

function handleReduceMotionChanged() {
    if (motionQuery.matches) {
        /* standard motion */
        video.setAttribute('autoplay', '')
    } else {
        /* do not show motion */
        video.removeAttribute('autoplay')
    }
}

motionQuery.addEventListener("change", handleReduceMotionChanged)

handleReduceMotionChanged(); // trigger once on load

You can take a look at the finished solution in the exercises/exercise3-reduced-motion directory of the project or on a completed CodePen.

Video: Add Prefers Reduced Motion to a Video
Loaded: 2%
Current Time 0:00
/
Duration Time 5:28
Video Transcript

Let's work on adding motion to a page. So if you want to pull up the page that I was demoing with the summer video with the sun we have it deployed on the testing accessibility website. The code for it is also available on GitHub. If you're the coding type. And you'd like to check that out.

It's under this exercises, exercise three directory. We have lots of options here for different things. We also have a code pen, so that's what I'm going to open up to show it to you since it's probably the easiest way to get this code working without having to set up the whole project. If you are so inclined to set up the whole project, it is on GitHub.

And there's also a link to a thing called git pod. If you want to play around with the code, but you don't necessarily want to set it up locally, lots of options for you, but I am going to pull up the code pen. So it looks. The same as the website, but we've got it. Just, this page gives us a nice environment to play with this example in a space that's dedicated.

We've got the video. So the JavaScript it's loaded in the markups. So we've got this video tag I'm actually going to, we've got a little the whole pages here. So including the mega menu. So that's in the header and I just closed that. So the video tag down here, we've got. The video element and it's pulling in an MP4 video, it's got the loop attribute on it, but the autoplay is being delivered with our JavaScript down here.

And so trying to zoom in code pen, but it gets to a point where the mega menu takes up so much space. You can't even really see the video. So let's start with getting this auto-play to respond to. User preference. So I'm going to go back to our slides and get out of full screen. I'm going to go back and copy this code, make it easy for myself.

So I'm going to copy the JavaScript code, go back over to code pen, and I'm gonna hit paste in the JavaScript part. So just get a little help here. So I've got a reference to the video element that gives me control over this. We've got, autoplay being added.

I haven't actually changed anything. I just pasted the code and all of a sudden it stopped playing. So the autoplay attribute. I don't want to just add by default. I'm actually curious why code pen just stopped playing the video. If I comment out that code, I want to see It just decided to stop playing for some reason.

But anyways, we know it's, I haven't done anything to change the video. I'm not really sure why it's not playing. But we'll play with the code and then I can open it in another window. And we'll refresh that and see what happens. So I've got this code that says the motion query with the match media function and.

If I were going to make this match to no preference. So that would be if the user hasn't set anything then I can do one action. If they have changed that to say that they don't want motion, then I can remove that. Auto-play. So I guess when it matches that they have no preference, they probably haven't touched it.

I'm going to say, add the autoplay attribute. And if they do have that preference set, I will remove And using this a little bit of JavaScript, I can set an attribute and remove an attribute. This is as much code as we're going to look at today, have no fear. And so knowing that this option exists can be helpful.

I'm not getting any carers. So I'm surprised the video stopped. I'm gonna hit save on this code pen. So hopefully if you want to play with it, you've already opened it. Cause what I save is going to change what you see when you load it for the first time. But that is so that I can come over here and open it in another window.

And so I've got this. Autoplay now, if I turn that reduced motion off, it will play cool. So now if I turn reduced motion on, I might need to refresh it, but it stops the video. So that seems to have worked. That's awesome. If I comment this out, just to check, just to level set for myself, did that actually work or is the browser handling this for me now automatically?

It's bizarre. Reduce motion,

something going on here. Maybe the code when I included, it's just breaking. So I'm gonna open my console and see if we have any errors. I don't see any similar funky going on. I'm not really sure what but I saw the code work, so I'm gonna have confidence that, that worked and I can toggle this preference on and off reduce motion and see, I think my computer might just be tired.

Yeah. Nice freeze frame. Okay. Yeah, for some reason, it's behaving a little bit strangely, but I did, we did see it work. So this is the code that you can use, depending on, in this case, we're trying to control a video element. You could be tapping into some other part of your code that turns animations on and off or control some other part of your code base.

Just know that this exists, this match media function in JavaScript. That's really, the takeaway is Seeing that you can respond to a user preference and then turn things on and off. That's really the takeaway here.

🛠️ Challenge: Add Prefers Reduced Motion to an SVG

Note: This challenge requires knowledge of HTML and CSS in order to solve. If you aren’t a developer, it’s still worth watching the difference in the solution video!

Your challenge is to remove the spinning animation from the sun SVG.

Sun SVG sectionLoading

🛠️ Solution: Add Prefers Reduced Motion to an SVG

This is the current state of the CSS:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.page-events svg {
      animation: rotation 10s linear infinite;
 }

We can add prefers-reduced-motion and prevent the SVG from being animated based on the preferences of the user using a CSS Media Query:

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
        transition: none;
    }
}

Once we make those changes we can test that it works by turning on and off the reduced motion preference in our operating system settings.

Video: Add Prefers Reduced Motion to an SVG Video
Loaded: 9%
Current Time 0:00
/
Duration Time 6:32
Video Transcript

Let's look at the sun, so we can implement the CSS part, see how that works. So SVG, we've got to move it around. We can see the browser doing its thing. It's like turning this box. We don't see that bounding box normally. Just when we hover, it's cool to see how the browser is the work that it's having to do. It's no wonder my computer fan is on. So I'm gonna, I'm actually gonna reset this example, the video example, the way it was.

So that when this gets loaded again, now we've got autoplay. Doesn't want to save either. Okay. Now it's saved. So it's reset back the way it was with the video part for our SVG that is down here in the contents. So we've got the. little sun SVG element and that is targeted in our CSS. So I go down here to the CSS section.

And scroll down. Here's our page events, SVG, and it's got an animation with a rotation that is 10 seconds long. It has linear easing and it goes infinitely. So it just, that's what keeps the sun rotating over and over again. There's also transition of a fill on the SVG, some elements inside of it. And when we hover over it, it changes the color.

But this transition. So we've got animation and transition. Both of those things we could potentially turn off. So there is a key frame down here for the rotation animation. That's where this rotation animation by name. That's what that, where that's defined. So in my CSS, so further down in the code after I've defined this animation is where I'm going to go and paste our CSS.

Media query. So I'm going to go and just do a little copying again and I'll paste it over here in our CSS. So I don't have any CSS class names named animation. It's called. We were referencing page events. And then SVG. That's what I happened to have on this page. So I could go and turn on. Any animation.

So we had an animation on that, one of the rotation using those key frames. So if I go over here to system preferences and reduce motion, Hey, would you look at that? And when I clicked that option, our son stopped rotating. So in this case, I didn't need refresh the page. Sometimes it'll just respond to that home refresh.

In the case of the video, it seemed like I needed to refresh the page to get that preference to actually take effect. But if a user had this preference set and they were navigating the web that way, and you were responding to this user press that would be awesome. So I've got prefers, reduced motion reduce as the condition.

I could also change this to no preference and invert this. So maybe instead of turning it off, when that condition matches, I could make the default not animate so I can move our animation from the default CSS. Down here too, when they have no preference, that's where I could animate. So that's just inverting the same thing.

So if I turn reduced motion off now, when the media query matches, they can opt into that animation. So it's like a subtle difference. It just means that the default is not animated. So we could play with that, but that's. One of my favorite features of CSS is this media query to respond to user preference.

Cause it's so powerful that from this browser context, we can opt in to that user preference and actually change the way that our webpages work.

So some of the examples we've seen might benefit from that JavaScript version, the match media function, like videos playing that dog studio app. Probably a ton of JavaScript on it, I would say.

But it might have some CSS animation. It's probably had web GL, which is another web technology. So depending on how things are implemented, you might need the CSS or might need the JavaScript to respond to the user preference. But I think no matter what role you're in, whether you're in design or development, knowing that these options are there can be really helpful.

To even as a designer, inform your developers that like, Hey, we've got these levers we can play with, to turn animation on or off. This should be something that we're thinking about. Like this is the moving version, implement this with reduced motion. However you need to so that we can respond to user preferences.

The reduced motion setting is really widely supported, so let's go look. One, one factor could be support of where you are. You know what you're developing for. In the browser, at least I'm looking at, canIuse.com?

And when I type in reduced for getting us to the reduced motion, media query support is pretty good in web browsers. And so it's really come on the scene fast and for users who want to reduce motion, like I have that setting turned on all the time on my computer. And so that's how I can usually tell that something's not responding to emotion is that I know that's set.

So it's a nice thing to opt into. I'd say, if you can then should you can also, because there are places where it's not supported, like some other mobile browsers. There might be places where it isn't supported still. I think you could safely use the setting, but you could also potentially provide a toggle button or something where the user can tell you whether they want motion on or off.

And if you're in a bigger web application or other application you could have, if there's any user settings, That's a great place to put some accessibility settings the icon text labels, like we talked about stuff about reducing motion. You can do, you can mix and match, like you could.

Respond to the operating system level one, because then if then user already has that set, then they don't have to go into their user preferences to have it respected. In terms of safety, that can be really helpful because you're not forcing the people who are most vulnerable to have to go find that user preference to feel safer.

But you can also absolutely put it in your app UI. You can do. I've had, I've made some examples where I have both like where it ops in or or it utilizes the operating system level settings. And if that's not set or not available, then I have a different button that people can toggle on and off. And show the toggle depending on what operating or, whether it's supported or not.